<template>
  <div class="p20">
    <h2 class="text-c mb10">【用于获取token方便本地调试】</h2>
    <van-form @submit="onSubmit" @failed="failed">
      <van-cell-group inset>
        <van-field
            clearable
            v-model="phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
            clearable
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登陆
        </van-button>
      </div>
    </van-form>

    <div>
      注意：根据自己的业务去设置登陆接口并修改该页面相关代码逻辑
    </div>
  </div>


</template>
<script setup>
import {ref,watch} from 'vue'
import {login} from "../../api/comm";
import {setToken} from "../../utils/auth";
import {useRouter,useRoute} from "vue-router";
import sha1 from "../../utils/sha1";
import setting from "../../settings";
const password = ref('12345678')
const phone = ref('13866668888')
const redirect = ref('')
const otherQuery = ref('')
const router = useRouter()
const route = useRoute()

const getOtherQuery =(query) =>{
  return Object.keys(query).reduce((acc, cur) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur]
    }
    return acc
  }, {})
}
watch(()=> router.currentRoute.value.path, o => {
  const query = route.query
  if (query) {
    redirect.value = query.redirect
    otherQuery.value = getOtherQuery(query)
  }
},{
  immediate: true
})
const failed =(e) =>{
  console.log(e)
}
const onSubmit = (values) => {
  const { password, phone} = values
  // todo 根据自己业务接口自行实现调用登陆接口并设置token 然后携带参数跳转回上一级页面
  login({
    password: sha1(password),
    phone: phone,
    type: "mobile",
  }).then(res =>{
    let {token} = res.data
    if(token){
      setToken(token)
      router.push({ path: redirect.value || '/' })
    }
  })
}
</script>

<style scoped>

</style>
